<template>
    <div class="top_enroll">
<!--        左侧的div框-->
        <div class="enroll_left">
<!--            放置图片logo-->
            <div class="enroll_logo">
                <img :src="this.img.logo" alt="动态logo" title="logo">
            </div>
<!--            显示欢迎注册的文字-->
            <div class="enroll_text">
                欢迎注册
            </div>
        </div>

<!--  -----------------------------------------      右侧的div框-->
        <div class="enroll_right">
<!--            已有账号请登录-->
            <div class="enroll_atext">
                已有账号? <a href="/#/login">请登录></a>
            </div>
        </div>

    </div>
</template>

<script>
export default {
    name: "TopEnroll",
    components: {
    },
    props: {

    },
    data() {
        //定义组件内的属性,组件内属性调用方式使用生命周期关键字this 如：this.age
        //这里的数据并不会根据父组件的数据更新而更新
        return {
            img:{
                logo:require('@/assets/logo/img.png'),
            }
        };
    },
    created() {
    },
    mounted() {
    },
    methods: {
    },
    //监听外部参数实时更新子组件内部变量
    watch: {
    },
};
</script>

<style scoped>

.top_enroll{
    position: relative;
    left: -10px;

    height: 110px;
    width: 120%;
    -webkit-box-shadow: 0 16px 18px 0 rgba(0,0,0,0.4) ;
    box-shadow: 0 16px 18px 0 rgba(0,0,0,0.4) ;

    display: flex;
    justify-content: space-between;
    align-items: center;
    /*!*防止将下侧的阴影也给进行隐藏了*!*/
    margin-bottom: 90px;
}
/*-------------左侧--------------*/
.enroll_left{
    /*background-color: #42b983;*/
    width: 300px;
    height: 100%;

    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.enroll_left .enroll_logo{
    width: 160px;
    height: 50px;
}
.enroll_left .enroll_logo img{
    width: 100%;
    height: 100%;
    object-fit: fill;
}
.enroll_left .enroll_text{
    height: 34px;
    line-height: 34px;
    font-size: 24px;
    color: #333;
}
/*--------------------右手侧-----------*/
.enroll_right{
    width: 500px;
    height: 100px;
    /*background-color: #E4393C;*/
}
.enroll_right .enroll_atext{
    font-size: 15px;
    color: #999;
    text-align: left; /*水平居中*/
    line-height: 140px; /*垂直居中 值为heigth的值*/
}
.enroll_right .enroll_atext a{
    color: #E4393C;
}
.enroll_right .enroll_atext a:hover {
    color: #c81623;
    text-decoration: underline;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-color: currentcolor;
    text-decoration-thickness: auto;
}
</style>